<template>
	
	<view >
		
		<uni-nav-bar fixed="true" :border="false">
			<view class="slot-wrap" style="margin: 0 auto;">
				<view class="search-box u-flex">
					<view class="search-input-box u-flex align-center">
						<view class="img-box">
							<image class="image100" src="/static/indexImages/searchicon.png" mode=""></image>
						</view>
						<view class="flex_alitm">
							<input v-model="keyword" type="text" style="font-size: 14px;" placeholder="搜你想要的商品">
						</view>
						<view class="search-btn" @click="handSearch">
							<text>搜索</text>
						</view>
					</view>
				</view>
			</view>
		</uni-nav-bar>
		<view class="content" style="padding-top: 0px;">
			
			<!-- 号卡精选 -->
			<view class="title-box mt-4">
				
				<view class="product-item mb-4" v-for="(item , index) in products" :key="index+'pro'">	
					<view class="  d-flex" >
						<view class="product-image-box mr-2">
							<image class="banner" :src="item.main_pic" mode="">
								
							</image>
							<image class="ranking" v-if="item.ranking==1" src="../../static/indexImages/top1.png" mode=""></image>
							<image class="ranking" v-if="item.ranking==2" src="../../static/indexImages/top2.png" mode=""></image>
							<image class="ranking" v-if="item.ranking==3" src="../../static/indexImages/top3.png" mode=""></image>
						</view>
						<view class="product-conten">
							<view class="d-flex align-center">
								<text class="font-bold font-18 mr-4">{{item.in_name}}</text>
								<view class="d-flex copy align-center" @click="handCopy(item.id)">
									<text class="mr-2">ID:{{item.id}}</text>
									<image class="copyimage" src="../../static/indexImages/copy.png" mode=""></image>
								</view>
							</view>
							<view class="d-flex align-center describe mt-1">
								<text>{{item.tishi}}</text>
							</view>
							<view class="font-bold d-flex align-center flow mt-2">
								<text>{{item.monthly}}</text>
								<text class="Verticalline mr-2 ml-2"></text>
								<text>{{item.flow}}</text>
							</view>
							<view class="mt-2 d-flex align-center u-flex-wrap">
								<view  class="mr-1 tag-item" v-for="(tag , indext) in  item.tag" :key="indext"    :class="indext == 0 ? 'warning' : indext == 1 ? 'primary' : 'error'" @click="handTag(tag ,index)">{{tag}}
								<text  v-if="indext==2">></text>
								<!-- <u-icon v-if="indext==2" name="arrow-right" color="#F93A4A" size="28"></u-icon> -->
								</view>
							</view>
							<view class="mt-2 d-flex align-center justify-space-between">
								<view class="d-flex price align-end">
									<text>¥</text>
									<text class="font-20">{{item.goods_price}}/</text>
									
									<!-- <text  class="font-20" v-if="isEmpty(item.unit)">{{item.unit}}</text> -->
									<text  class="font-20" >月</text>
								</view>
								<view class="button ml-2"  @click="dumpPage('/pages/goodsDetail/goodsDetail',{id:item.id},'to')">
									立即申请
								</view>
							</view>
							
						</view>
					</view>
					<view class="tc-describe mt-2 pt-2" @click="handPackageDescription(item.id)">
						<view class="d-flex align-center">
							
							<uni-icons type="info-filled" color="#ABABAB" size="20"></uni-icons>
							<text class="tc-title mr-1 ml-1">套餐说明:</text>
							<text class="ellipsis-container">{{item.voice}}</text>
							<uni-icons type="right" color="#ABABAB" size="20"></uni-icons>

						</view>
					</view>
				</view>
				<page-empty  con="暂无商品~" v-if="isEmpty(products)"></page-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navbarTitle: '号码详情',
				bgColor: '#0081ff',
				 background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				title: 'Hello',
				keyword:'',
				background:{
					background:'#fff'
				},
				bannerlist:[ //轮播图数据
					{
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				tabs:[ //金刚区数据
					{
						id:0,
						name:'选靓号',
						image:('../../static/indexImages/selectTel.png'),
						path:'',//如果要跳转页面的话
					},
					{
						id:1,
						name:'办套餐',
						image:('../../static/indexImages/Package.png'),
						path:'',//如果要跳转页面的话
					},
					{
						id:2,
						name:'生日号',
						image:('../../static/indexImages/birthday.png'),
						path:'',//如果要跳转页面的话
					},
					{
						id:3,
						name:'宽带办理',
						image:('../../static/indexImages/broadband.png'),
						path:'',//如果要跳转页面的话
					},
					{
						id:4,
						name:'定制号',
						image:('../../static/indexImages/customized.png'),
						path:'',//如果要跳转页面的话
					},
				],
				products:[ //产品数据
					{
						id:658,
						image:('../../static/indexImages/customized.png'),
						name:'联通新海卡',
						describe:'19元月享160G大流量',
						price:'15',
						unit:'月',
						month:'月租19元',
						flow:'160G流量',
						tag:['大流量', '次月返' ,'禁发区域'],
						tip:'套餐说明套餐，说明套餐说明说明套餐说明说明套餐说明说明套餐说明说明套餐说明说明套餐说明...',
						promoter:'bin890315',
						ranking:1,//排名，如果数据是排好序的话，也可以用index判断
					},
					{
						id:658,
						image:('../../static/indexImages/customized.png'),
						name:'联通新海卡',
						describe:'19元月享160G大流量',
						price:'15',
						unit:'月',
						month:'月租19元',
						flow:'160G流量',
						tag:['大流量', '次月返' ,'禁发区域'],
						tip:'套餐说明套餐，说明套餐说明说明套餐说明...',
						promoter:'bin890315',
						ranking:2,//排名，如果数据是排好序的话，也可以用index判断
					},
					{
						id:658,
						image:('../../static/indexImages/customized.png'),
						name:'联通新海卡',
						describe:'19元月享160G大流量',
						price:'15',
						unit:'月',
						month:'月租19元',
						flow:'160G流量',
						tag:['大流量', '次月返' ,'禁发区域'],
						tip:'套餐说明套餐，说明套餐说明说明套餐说明...',
						promoter:'bin890315',
						ranking:3,//排名，如果数据是排好序的话，也可以用index判断
					}
				],
			
				customStyle:{
					color: '#fff',
					backgroundColor:'#F93A4A'
				},
				serverHost:'',
			}
		},
		onLoad() {
			// uni.showNavigationBarLoading();
			this.serverHost = uni.$my.serverHost;
			this.goods();
		},
		methods: {
			isEmpty(item) {
				return uni.$uv.test.empty(item)
			},
			getProperty(obj, key) {
				return uni.$uv.getProperty(obj, key);
			},
			// 搜索方法
			handSearch(){
				console.log(this.keyword);
			},
			// 点击tab
			handTab(item){
				uni.showToast({
					title:item.name,
					icon:'none'
				})
			},
			// 点击套餐说明
			handPackageDescription(id){
				uni.showToast({
					title:'套餐说明',
					icon:'none'
				})
			},
			// 点击禁发区域
			handTag(item ,index){
				if(index==2){
					uni.showToast({
						title:'禁发区域',
						icon:'none'
					})
				}
			},
			// 复制id
			handCopy(id){
				// uni.setClipboardData({
				// 	data: id+'', //需要字符串
				// 	success: function () {
				// 	  uni.showToast({
				// 		title: '复制成功',
				// 		icon: 'success',
				// 		duration: 2000
				// 	  });
				// 	}
				//   });
				let  test = id +'';
				setTimeout(()=>{
				//#ifndef H5
					uni.setClipboardData({
						data: id+'', //需要字符串
						success: function () {
						  uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						  });
						},
						fail: (err) => {
							uni.showToast({
								title: err,
								icon: 'success',
								duration: 2000
							});
						}
					  });	
				//#endif
				//#ifdef H5
					let textarea = document.createElement("textarea")
						textarea.value = test
						textarea.readOnly = "readOnly"
						document.body.appendChild(textarea)
						textarea.select() // 选择对象
						textarea.setSelectionRange(0, test.length) //核心
						let result = document.execCommand("copy") // 执行浏览器复制命令
						if (result) {
							uni.showToast({
								title: '复制成功',
								duration: 2000
							});
						}
						textarea.remove()
				//#endif
				})
			},
			// 立即申请
			handApply(id){
				
			},
			init() {
				// console.log(typeof window);
				console.log(uni.$my.serverHost)
				uni.$uv.http.get('/index').then(res => {
					// this.bannerlist = res.data.swiper;
					// this.gridList = this.makeServerPicUrl(res.data.grid || '', 'pic')
					this.bannerlist = this.makeServerPicUrl(res.data.swiper || '', 'pic');
					// console.log(this.bannerlist);
					// this.adList = this.makeServerPicUrl(res.data.ad || '', 'pic')
					// this.tabList = res.data.tab || []
					// this.popAd = this.makeServerPicUrl(res.data.pop || '', 'pic')
					// if (!this.isEmpty(this.popAd) && !this.isReInit) {
					// 	this.openPopAd()
					// }
					// if (!this.isEmpty(this.tabList)) {
					// 	this.getTabData()
					// }
					// console.log(res)
				}).catch(e => {
					console.log(e)
				})
			},
			// 把服务器上的图片链接都转为地址
			makeServerPicUrl(rowsArray, picField) {
				if (!this.isEmpty(rowsArray)) {
					// console.log(1111111);
					if (uni.$uv.test.array(rowsArray)) {
						for (let i = 0; i < rowsArray.length; i++) {
							// console.log(this.serverHost,2222222222);
							rowsArray[i][picField] = this.serverHost + rowsArray[i][picField]
						}
					} else if (uni.$uv.test.object(rowsArray)) {
						// console.log(this.serverHost,333333333333333);
						rowsArray[picField] = this.serverHost + rowsArray[picField]
					}
				}
				return rowsArray
			},
			goods(){
				uni.$uv.http.get('/goods/list').then(res => {
					console.log(res);
					// this.bannerlist = res.data.swiper;
					this.products = this.makeServerPicUrl(res.data || '', 'main_pic')
				}).catch(e => {
					console.log(e)
				})
			},
			dumpPage(page, params, type) {
				console.log(33333333333333);
				uni.$my.dumpPage(page, params, type)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 20rpx;
		padding-bottom: 100rpx;
	}
	.button{
			width: 128rpx;
			height: 50rpx;
			color: #fff;
			text-align: center;
			line-height: 50rpx;
			background: #FF600F;
			border-radius: 50rpx;
		
	}
	.swiper-item{
		width: 100%;
		height: 300rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.slot-wrap{
		padding: 0rpx 0rpx;
		width: 100%;
	}
	.search-box{
		border: 1px solid $uni-color-primary;
		color: $uni-color-primary;
		border-radius: 36rpx;
		height: 72rpx;
		width: 100%;
		padding: 0 0 0 12rpx;
		.search-input-box{
			input{
				width: 510rpx;
				// flex: 1;
			}
		}
		.image100 , .img-box{
			width: 50rpx;
			height: 50rpx;
		}
		.search-btn{
			width: 128rpx;
			height: 60rpx;
			color: #fff;
			text-align: center;
			line-height: 60rpx;
			background: $uni-color-primary;
			border-radius: 50rpx;
		}
	}
	.tab_box{
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		.tab_item {
			width: 25%;
			text-align: center;
			image{
				width: 74rpx;
				height: 74rpx;
				
			}
		}
	}
	.title-box{
		.title-des{
			width: 168rpx;
			height: 50rpx;
			color: #fff;
			text-align: center;
			line-height: 50rpx;
			background: #F93A4A;
			border-radius: 24rpx 24rpx 24rpx 6rpx;
		}
		.u-title{
			letter-spacing: 6rpx;
		}
	}
	.product-item{
		background: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		
		.product-image-box{
			width: 260rpx;
			height: 260rpx;
			position: relative;
			.banner{
				width: 100%;
				height:100%;
			}
			.ranking{
				width: 140rpx;
				height: 80rpx;
				position: absolute;
				left: -8rpx;
				top: 0;
			}
		}
		.product-conten{
			.copy{
				background-color: $uni-color-primary;
				padding: 8rpx;
				border-radius: 6rpx;
				color: #fff;
				
				image{
					width: 24rpx;
					height: 24rpx;
				}
				.copyimage{
					width: 32rpx;
					height: 32rpx;
				}
			}
			.flow{
				.Verticalline{
					width: 0px;
					height: 24rpx;
					border: 1px solid #ABABAB;
				}
			}
			.describe{
				color: #5D5D5D;
			}
			.price{
				color: #FF600F;
			}
		}
		.tag-item{
			padding: 6rpx 10rpx;
			border-radius: 4px;
			margin-bottom: 6rpx;
		}
		.warning{
			color: #BA692A;
			background-color: #FDF3E8;
		}
		.primary{
			color: #1456FE;
			background-color: #E6F0F9;
		}
		.error{
			color:#F93A4A;
			background-color: #FFEAE8;
		}
	}
	.tc-describe{
		border-top: 1px solid rgba(0,0,0,0.1);
	}
	.slot-wrap{
		padding: 0rpx 0rpx;
		width: 100%;
	}
	.ellipsis-container {
	    white-space: nowrap; /* 防止文本换行 */
	    overflow: hidden; /* 隐藏超出容器的文本 */
	    text-overflow: ellipsis; /* 在文本末尾添加省略号 */
	    width: 420rpx; /* 设置容器的宽度 */
		color: #ABABAB;
	}
	::v-deep .uni-navbar__header-btns-right{
		display: none;
	}
	::v-deep .uni-navbar__header-btns-left{
		display: none;
	}
	::v-deep .uni-navbar__header-container{
		align-items: center;
		justify-content: space-between;
	}
	::v-deep .uni-navbar__header-container{
		padding: 0;
	}
</style>
